<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      // import { reactive, effect } from './code/05-reactivity/reactivity/index.js'
      import { reactive, effect } from './reactivity/index.js'

      const John = reactive({
        name: 'John',
        age: 30,
        address: {
          city: 'New York',
          country: 'USA',
        },
      })
      // get/set
      John.address.city = 'London'
      // get/delete
      delete John.address.country

      const Stock = reactive({
        name: 'iPhone',
        price: 700,
        count: 3,
      })

      let totalPrice = 0

      effect(() => {
        totalPrice = Stock.price * Stock.count
      })
      console.log(2100, totalPrice)

      Stock.price = 800
      console.log(2400, totalPrice)

      Stock.count = 2
      console.log(1600, totalPrice)
    </script>
  </body>
</html>
